<template>
  <div class="example">
    <div>这是父亲</div>
    <div>
      <button @click="changeVal()">changeVal</button>
      <p>val: {{val}}</p>
    </div>
    <childOne ref="childOne"
              @changeVal='changeVal'
              :props1='val' />
  </div>
</template>
<script>
import childOne from './child1.vue'
import Vue from 'vue'
export default {
  name: "refTest",
  components: { childOne },
  data() {
    return {
      val: '我传给子组件'
    }
  },
  mounted() {
    // https://blog.csdn.net/qq_33576343/article/details/82794555    vue(2.x) 响应式修改数据（对象、数组）及难点（坑）
    /*

    1. Vue不能检测对象属性的添加、删除（仅此而已，可直接对该对象重新赋值、修改该对象或内层对象的属性）

    2. Vue不能检测数组的项修改（根据index）、length修改（仅此而已，可直接对数组重新赋值，如使用filter、map、concat、slice等方式生成新数组对其赋值）
    ————————————————
    */
    const childOne = this.$refs.childOne  // 获取到了子组件实例

    window.setTimeout(() => {

      // ---基本类型
      // console.log(childOne);
      // childOne.num = childOne.num - 10  // 可以直接修改基本数据类型在页面中有相应的效果
      childOne.changeNum(1000);  // 这个也是可以的,页面同步修改


      // --引用类型
      // console.log(childOne);
      // childOne.$set(childOne.obj, 'age', 211) // 这样也可以
      Vue.set(childOne.obj, 'age', 210)// $set是Vue.set的别名
      // this.$set(childOne.obj, 'age', 211) // 这样也可以
      // childOne.obj.age = 212 // 这样也行


      // childOne.btnAddOne(20) // 可以调用子元素的方法来修改子元素里的数据,并且页面同步修改
      // childOne.changeName('234234') //可以
    }, 2000)
  },
  methods: {
    changeVal(val) {
      this.val = val || Math.random() + 1
    },
    listeningVal() {

    }
  },
  activated: {},
  deactivated: {}
}
</script>
<style lang="less" scoped>
</style>
